import { Clipper } from "@clipper/clipper";
import { Path, Segment, Vec2 } from "@clipper/geometry";
import { Intr, IntrType } from "@clipper/intr";
import { Mat3 } from "@clipper/matrix";
import { bgCanvas } from "@clipper/ui";

let W = bgCanvas.width;
let H = bgCanvas.height;

function transformPath(path: Path, mat: Mat3) {
  let newPath = new Path();
  for (const v of path.points) {
    newPath.points.push(mat.applyToVec(v));
  }
  return newPath;
}

let clipPath = Path.from([-0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5]);
let cwPath = Path.from([
  -0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0, 0, 0, 0, -0.5,
]);
let cwPath2 = Path.from([
  0, -0.5, 0, 0, -0.5, 0, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5,
]);
let ccwPath = cwPath.clone().reverse();

let path1 = transformPath(
  cwPath,
  new Mat3().translate(400, 300).rotate(30).scale(200, 400)
).round();

let path2 = transformPath(
  cwPath2,
  new Mat3().translate(500, 300).rotate(-30).scale(200, 400)
).round();

let path3 = transformPath(
  clipPath,
  new Mat3().translate(400, 300).rotate(0).scale(650, 400)
).round();

console.log(`path1: ${path1}`);
console.log(`path2: ${path2}`);
console.log(`path3: ${path3}`);

bgCanvas.drawPath(path1, { strokeColor: "red", close: true });
bgCanvas.drawPath(path2, { strokeColor: "green", close: true });
// bgCanvas.drawPath(path3, { strokeColor: "blue", close: true });

let clipper = new Clipper();
clipper.addSubject(path1, "red");
// clipper.addSubject(path2, "green");
clipper.addClip(path2, "green");
clipper.execute();
